<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>公告-家电维修系统</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{/css/all.min.css}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">维修工工作台</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="#">工作台</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/repairman/orders">我的订单</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/repairman/profile">个人资料</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/repairman-announcements">公告</a>
                </li>
            </ul>
            <div class="d-flex">
                <span class="navbar-text me-3" id="userInfo"></span>
                <button class="btn btn-outline-light" onclick="logout()">退出</button>
            </div>
        </div>
    </div>
</nav>

<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 mx-auto">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">公告列表</h5>
                </div>
                <div class="card-body">
                    <div id="announcementList"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加必要的依赖 -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script src="/js/request.js"></script>
<script>
    // 加载公告列表
    window.loadAnnouncements = function () {
        $.ajax({
            url: '/api/announcements/user',
            type: 'GET',
            data: {
                userType: 1  // 1表示用户可见
            },
            headers: {
                'Authorization': 'Bearer ' + localStorage.getItem('token')
            },
            success: function (announcements) {
                const announcementList = $('#announcementList');
                announcementList.empty();

                if (announcements.length === 0) {
                    announcementList.append(`
                            <div class="text-center text-muted">
                                暂无公告
                            </div>
                        `);
                    return;
                }

                // 过滤掉只允许用户查看的公告
                announcements = announcements.filter(announcement => announcement.type !== 1);

                announcements.forEach(announcement => {
                    const createdAt = announcement.createdAt;
                    const viewCount = announcement.viewCount;
                    announcementList.append(`
                            <div class="card mb-3">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-center mb-2">
                                        <h5 class="card-title mb-0">
                                            ${announcement.top ? '<span class="badge bg-danger me-2">置顶</span>' : ''}
                                            ${announcement.title}
                                        </h5>
                                        <small class="text-muted">${createdAt ? new Date(createdAt).toLocaleString() : '未发布'}</small>
                                    </div>
                                    <p class="card-text text-truncate">
                                        ${announcement.content.replace(/<[^>]*>/g, '')}
                                    </p>
                                    <div class="d-flex justify-content-between align-items-center">
                                        <small class="text-muted">浏览次数：${viewCount}</small>
                                        <button class="btn btn-sm btn-primary" onclick="viewAnnouncement(${announcement.id})">
                                            查看详情
                                        </button>
                                    </div>
                                </div>
                            </div>
                        `);
                });
            },
            error: function (xhr) {
                if (xhr.status === 401) {
                    window.location.href = '/login';
                } else {
                    console.error('加载公告列表失败');
                }
            }
        });
    };

    // 查看公告详情
    window.viewAnnouncement = function (id) {
        window.location.href = `/announcement?id=${id}`;
    };

    // 退出登录
    window.logout = function () {
        localStorage.removeItem('token');
        window.location.href = '/login';
    };

    // 页面加载完成后初始化
    $(document).ready(function () {
        if (!localStorage.getItem('token')) {
            window.location.href = '/login';
            return;
        }
        window.loadAnnouncements();
    });
</script>
</body>
</html> 